<template>
  <div style="background-color: green; grid-column: 2/3; grid-row: 1/3; display: grid;grid-template-rows: 10% 90%">
    <div style="grid-row: 1/2">
      <el-menu mode="horizontal" default-active="1" style="height: 100%">
        <el-menu-item index="1">
          <div @click="toCommonword">常见单词</div>
        </el-menu-item>
        <el-menu-item index="2">
          <div @click="toSpeak">流利拼读</div>
        </el-menu-item>
        <el-menu-item index="3">
          <div @click="toCommonsentence">基础句型</div>
        </el-menu-item>
      </el-menu>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'ViewEnglish',
  methods: {
    toSpeak() {
      this.$router.push({name: 'ViewSpeak'})
    },
    toCommonword() {
      this.$router.push({name: "ViewCommonword"})
    },
    toCommonsentence() {
      this.$router.push({name: "ViewCommonsentence"})
    }
  }
}
</script>